<template>
  <div class="seller" ref="sellerWrapper">
    <div class="seller_content">
      <div class="overview">
        <h1 class="title">{{seller.name}}</h1>
        <div class="desc border-1px">
          <star :size="36" :score="seller.score"></star>
          <span class="text">({{seller.ratingCount}})</span>
          <span class="text">月售{{seller.sellCount}}单</span>
        </div>
        <ul class="remark">
          <li class="block">
            <h2 class="text">起送价</h2>
            <div class="content">
              <span class="stress">{{seller.minPrice}}</span>元
            </div>
          </li>
          <li class="block">
            <h2 class="text">商家配送</h2>
            <div class="content">
              <span class="stress">{{seller.deliveryPrice}}</span>元
            </div>
          </li>
          <li class="block">
            <h2 class="text">平均配送时间</h2>
            <div class="content">
              <span class="stress">{{seller.deliveryTime}}</span>分钟
            </div>
          </li>
        </ul>
        <!-- <div class="favorite" @click="torggleFacorite">
          <span class="icon-favorite" :class="{'active':isFavorite}"></span>
          <span class="text">{{favoriteText}}</span>
        </div> -->
      </div>
      <split></split>
      <div class="bulletin_wrapper">
        <h1 class="title">公告与活动</h1>
        <p class="text">{{seller.bulletin}}</p>
        <ul v-if="seller.supports" class="supports_wrapper">
            <li class="supports-item" v-for="(item,index) in seller.supports">
              <span class="icon" :class="mapClass[seller.supports[index].type]"></span>
              <span class="description">{{seller.supports[index].description}}</span>
            </li>
          </ul>
      </div>
      <split></split>
      <div class="pics">
        <h1 class="title">商家实景</h1>
        <div class="pic_wrapper" ref="picsWrapper">
          <ul class="pic_list" ref="piclist">
            <li class="pic_item" v-for="(picItem,index) in seller.pics" :key="index">
              <img class="pic" width="120" height="90" :src="picItem" alt="">
            </li>
          </ul>
        </div>
      </div>
      <split></split>
      <div class="infos_wrapper">
        <h1 class="title">商家信息</h1>
        <ul class="infos_list">
          <li class="infos_item" v-for="(item,index) in seller.infos" :key="index">
            <span class="text">{{item}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import axios from "axios";
import star from "../../components/star/star";
import ratingselect from "../../components/ratingselect/ratingselect";
import split from "../../components/split/split";
import formatDate from "../../common/js/formatDate";
export default {
  props: {
    seller: {
      type: Object
    }
  },
  created() {
    this.mapClass = ["decrease", "discount", "special", "invoice", "guarantee"];
  },
  components: {
    star,
    split
  },
  watch: {
    seller() {
      // 监控props里面的seller数据变化
      this.$nextTick(() => {
        // console.log(this.seller);
        this._initScroll();
        this._initPicScroll();
      });
    }
  },
  mounted() {
    // DOM已经准备好,只会执行一次，此页面刷新后，就没有this.seller了
    this.$nextTick(() => {
      // console.log(this.seller);
      this._initScroll();
      this._initPicScroll();
    });
  },
  methods: {
    _initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.sellerWrapper, {
          click: true
        });
      } else {
        this.scroll.refresh();
      }
    },
    _initPicScroll() {
      if (this.seller.pics) {
        let picW = 120; //图片的宽度
        let margin = 6;
        let w = (picW + margin) * this.seller.pics.length - margin;
        this.$refs.piclist.style.width = w + "px";
        this.$nextTick(() => {
          if (!this.picScroll) {
            this.picScroll = new BScroll(this.$refs.picsWrapper, {
              scrollX: true,
              eventPassthrough: "vertical", // 滚动方向横向
              click: true
            });
          } else {
            this.seller.pics.refresh();
          }
        });
      }
    },
    torggleFacorite(event) {
      if (!event._constructed) {
        return
      }
      this.isFavorite = !this.isFavorite;
      // 将状态缓存到localstorage
      // saveToLocal(this.seller.id, 'isFavorite', this.isFavorite);
    }
  },
  // computed: {
  //   favoriteText() {
  //     return this.isFavorite ? '已收藏' : '收藏';
  //   }
  // }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li {
  list-style: none;
}
.seller {
  position: absolute;
  left: 0;
  top: 174px;
  width: 100%;
  bottom: 0;
  overflow: hidden;
}
.overview {
  padding: 0 18px;
  position: relative;
}
.overview .title {
  font-size: 14px;
  line-height: 14px;
  color: rgb(7, 17, 27);
  padding: 18px 0 8px 0;
}
.desc {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
  font-size: 0;
}
.overview .star {
  display: inline-block;
  margin-right: 8px;
  vertical-align: top;
}
.overview .text {
  display: inline-block;
  font-size: 10px;
  line-height: 18px;
  color: rgb(77, 85, 93);
  margin-right: 12px;
  vertical-align: top;
}
.remark {
  padding: 18px 0;
  display: flex;
}
.block {
  flex: 3;
  border-right: 1px solid rgba(7, 17, 27, 0.1);
  text-align: center;
}
.block:last-child {
  border-right: none;
}
.remark .text {
  font-size: 10px;
  line-height: 10px;
  color: rgb(147, 153, 159);
}
.content {
  margin-top: 4px;
  font-size: 10px;
  line-height: 24px;
  color: rgb(7, 17, 27);
}
.stress {
  font-size: 24px;
  font-weight: 200;
}
.favorite {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 40px;
}
.icon-favorite {
  display: block;
  margin-bottom: 4px;
  font-size: 24px;
  line-height: 24px;
  color: #d4d6d9;
  text-align: center;
}
.favorite .active {
  color: rgb(240, 20, 20);
}
.favorite .text {
  display: block;
  font-size: 10px;
  line-height: 10px;
  color: rgb(77, 85, 93);
  text-align: center;
}
.bulletin_wrapper {
  padding: 0 18px;
}
.bulletin_wrapper .title {
  font-size: 14px;
  line-height: 14px;
  color: rgb(7, 17, 27);
  padding: 18px 0 8px 0;
}
.bulletin_wrapper .text {
  padding: 0 12px 16px 12px;
  font-size: 12px;
  line-height: 24px;
  font-weight: 200;
  color: rgb(240, 20, 20);
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
}

.supports_wrapper .supports-item {
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
  padding: 16px 12px;
}

.supports_wrapper .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  vertical-align: middle;
}
.decrease {
  background-image: url("../../../resource/img/decrease_4@2x.png");
}
.discount {
  background-image: url("../../../resource/img/discount_4@2x.png");
}
.guarantee {
  background-image: url("../../../resource/img/guarantee_4@2x.png");
}
.invoice {
  background-image: url("../../../resource/img/invoice_4@2x.png");
}
.special {
  background-image: url("../../../resource/img/special_4@2x.png");
}
.supports_wrapper .description {
  font-size: 12px;
  line-height: 16px;
  font-weight: 200;
  color: rgb(7, 17, 27);
  vertical-align: middle;
}
.bulletin_wrapper .supports-item:last-child {
  border: none;
}

.pics {
  padding: 18px;
}
.pics .title {
  font-size: 14px;
  line-height: 14px;
  color: rgb(7, 17, 27);
  padding-bottom: 12px;
}
.pic_wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.pic_list {
  font-size: 0;
}
.pic_item {
  display: inline-block;
  margin-right: 6px;
  width: 120px;
  height: 90px;
}
.pic_item:last-child {
  margin: 0;
}
.infos_wrapper {
  padding: 18px;
}
.infos_wrapper .title {
  font-size: 14px;
  line-height: 14px;
  color: rgb(7, 17, 27);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
}
.infos_item {
  padding: 16px 12px;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
  font-size: 12px;
}
.infos_item:last-child {
  border: none;
}
.infos_wrapper .text {
  line-height: 16px;
}
</style>